﻿<UserControl x:Class="Stopwatch.Controls.TimerControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:primitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:local="clr-namespace:Stopwatch.Controls"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="400" d:DesignWidth="420">

    <UserControl.Resources>
        <Style x:Key="LoopingSelectorStyle" TargetType="primitives:LoopingSelector">
            <Setter Property="Width" Value="138"/>
        </Style>
    </UserControl.Resources>

    <Grid d:IsLocked="True">
        <Grid x:Name="PickerPanel" d:IsLocked="True">
            <Grid.Resources>
                <DataTemplate x:Key="NumberTemplate">
                    <Grid>
                        <TextBlock Text="{Binding}" FontSize="92" FontFamily="{StaticResource PhoneFontFamilySemiBold}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Grid>
                </DataTemplate>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <TextBlock x:Name="hoursTag" Text="hrs." Foreground="LightGray" Grid.Column="0" Margin="12,111,0,0" HorizontalAlignment="Left" Height="27" VerticalAlignment="Top" Width="60"/>
            <primitives:LoopingSelector x:Name="HoursLoopingSelector" Grid.Column="0"  ItemSize="138,138" ItemMargin="6" ItemTemplate="{StaticResource NumberTemplate}" Style="{StaticResource LoopingSelectorStyle}">
                <primitives:LoopingSelector.DataSource>
                    <local:NumbersDataSource Maximum="23" />
                </primitives:LoopingSelector.DataSource>
            </primitives:LoopingSelector>
            <TextBlock x:Name="minutesTag" Text="mins." Foreground="LightGray" Grid.Column="1" Margin="12,111,0,0" HorizontalAlignment="Left" Height="27" VerticalAlignment="Top" Width="60"/>
            <primitives:LoopingSelector x:Name="MinutesLoopingSelector" Grid.Column="1" ItemMargin="6" ItemSize="138,138" ItemTemplate="{StaticResource NumberTemplate}" Style="{StaticResource LoopingSelectorStyle}">
                <primitives:LoopingSelector.DataSource>
                    <local:NumbersDataSource Maximum="59" />
                </primitives:LoopingSelector.DataSource>
            </primitives:LoopingSelector>
            <TextBlock x:Name="secondsTag" Text="secs." Foreground="LightGray" Grid.Column="2" Margin="12,111,0,0" Height="27" VerticalAlignment="Top" Width="60" HorizontalAlignment="Left" d:LayoutOverrides="Width"/>
            <primitives:LoopingSelector x:Name="SecondsLoopingSelector" Grid.Column="2" ItemMargin="6" ItemSize="138,138" ItemTemplate="{StaticResource NumberTemplate}" Style="{StaticResource LoopingSelectorStyle}">
                <primitives:LoopingSelector.DataSource>
                    <local:NumbersDataSource Maximum="59" />
                </primitives:LoopingSelector.DataSource>
            </primitives:LoopingSelector>
        </Grid>
        <Grid x:Name="ShowPanel" Visibility="Collapsed" d:IsLocked="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="25"/>
                <ColumnDefinition Width="100"/>
                <ColumnDefinition Width="45"/>
                <ColumnDefinition Width="100"/>
                <ColumnDefinition Width="45"/>
                <ColumnDefinition Width="100"/>
            </Grid.ColumnDefinitions>
            <TextBlock x:Name="HourText" Text="00"  Grid.Column="1" FontSize="92" FontFamily="{StaticResource PhoneFontFamilySemiBold}" HorizontalAlignment="Left" VerticalAlignment="Center" />
            <TextBlock Text=":" Margin="0,0,0,15" Grid.Column="2" FontSize="92" FontFamily="{StaticResource PhoneFontFamilySemiBold}" HorizontalAlignment="Center" VerticalAlignment="Center" />
            <TextBlock x:Name="MinuteText" Text="00" Grid.Column="3" FontSize="92" FontFamily="{StaticResource PhoneFontFamilySemiBold}" HorizontalAlignment="Left"  VerticalAlignment="Center"/>
            <TextBlock Text=":" Margin="0,0,0,15" Grid.Column="4" FontSize="92" FontFamily="{StaticResource PhoneFontFamilySemiBold}" HorizontalAlignment="Center" VerticalAlignment="Center" />
            <TextBlock x:Name="SecondText" Text="00" Grid.Column="5" FontSize="92" FontFamily="{StaticResource PhoneFontFamilySemiBold}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
        </Grid>
    </Grid>
</UserControl>
